<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

solot是一种传递参数的方式 类似于pros
<script src="../js/vue.min.js"></script>

<div id="app">
    <children><span slot="first">【12345】</span>
        <!--上面这行不会显示-->
    </children>
</div>
<pre>假如父组件没有在子组件中放置有标签，或者是父组件在子组件中放置标签，但有slot属性，而子组件中没有该slot属性的标签。

那么，子组件的slot标签，将不会起到任何作用。

除非，该slot标签内有内容，那么在无分发内容的时候，会显示该slot标签内的内容。

【1】name='first'的slot标签被父组件对应的标签所替换（slot标签内部的内容被舍弃）；

【2】name='last'的slot标签，因为没有对应的内容，则显示该slot标签内部的内容。


</pre>

<script>
    var vm = new Vue({
    el: '#app', components: {
        children: {
            //这个无返回值，不会继续派发
            template: "<div><slot name='first'><button>【如果没有内容则显示我1】</button></slot>为了明确作用范围，<slot name='last'><button>【如果没有内容则显示我2】</button></slot>所以使用button标签</div>"
        }
    }
})
</script>

</body>
</html>